<!--筛选栏-->
<template>
  <view class="bar">
    <view class="filter">
      <view class="nav {{currentType=='zonghe' ? 'nav_active' : ''}}" data-current="zonghe" @tap="orderBy">销量</view>

      <view class="grid nav">
        <view class="price {{currentType=='price' ? 'nav_active' : ''}}" data-current="price" @tap.stop="orderBy">价格</view>
        <view>
          <view class="arrow_up {{arrowType=='desc' ? 'arrow_up_red' : 'arrow_up_gray'}}"></view>
          <!-- 向下的三角形 -->
          <view class="arrow_down {{arrowType=='asc' ? 'arrow_down_red' : 'arrow_down_gray'}} "></view>
        </view>
      </view>
    <view class="nav  {{currentType=='sale' ? 'nav_active' : ''}}" data-current="sale" @tap="orderBy">新品</view>
    <view class="grid nav">
        <view class="price {{cmShow ? 'nav_active' : ''}}" data-current="sku" @tap.stop="orderBy">尺码</view>
        <view wx:if="{{cmShow}}" data-current="sku" @tap.stop="orderBy">
            <!-- 向下的三角形 -->
            <view class="arrow_down arrow_down_gray"></view>
        </view>
        <view wx:if="{{!cmShow}}" data-current="sku" @tap.stop="orderBy">
            <!-- 向下的三角形 -->
            <view class="arrow_up arrow_up_gray"></view>
        </view>
    <!--筛选测栏-->
  </view>
    </view>
      <FilterSlider @sendSize.user="getSizeFun"></FilterSlider>
  </view>
</template>

<script>
  import wepy from 'wepy';
  import FilterSlider from '../../components/filterSlider'
  export default class filterBar extends wepy.component {
    data = {
      currentType: "",
      arrowType: "",
      flag: false,
      type: "desc",
        size:'',
        cmShow : false
    }
    components = {
        FilterSlider:FilterSlider
    }
    methods = {
      orderBy(e) {
        let that = this;
        if (that.data.currentType == e.target.dataset.current) {
        } else {
          that.currentType = e.target.dataset.current;
        }
        that.priceOrderBy(e.target.dataset.current)
        that.$apply();
      },
        getSizeFun(r,c){
            const t = this;
            t.cmShow = false;
            if(c){
                t.size = r;
                t.$emit("currentType", {
                    name: "sku",
                    size:t.size
                });
            }
        }
    }
    priceOrderBy(orderBy) {
      let that = this;
      if (orderBy == "price") {
        if (that.arrowType === "desc") {
          that.arrowType = "asc";
        } else {
          that.arrowType = "desc";
        }
      }else {
          that.arrowType = "";
      }
      if (orderBy == "sku") {
          that.cmShow = true;
          that.$invoke('FilterSlider','priChangeShow',true);
      }else {
          that.cmShow = false;
          that.$invoke('FilterSlider','priChangeShow',false);
      }
    }
    watch = {
      currentType(newValue) {
          if(newValue!='sku'){
              this.$emit("currentType", {
                  name: newValue,
                  type: 'desc'
              });
          }
      },
      arrowType(newValue, oldValue) {
        if (oldValue !== "" && newValue !== "") {
          this.$emit("currentType", {
            name: "price",
            type: newValue
          });
        }
      }
    }
  }
</script>

<style lang="less">
    .bar{
        position: relative;
    }
  .filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
      height: 60rpx;
    .nav {
      color: #000000;
      font-size: 26rpx;
      padding: 12px 16px;
    }
    .nav_active {
      color: #f03939;
    }
    .icon-filter {
      font-size: 26rpx;
      color: #666;
      margin-left: 5rpx;
    }
  }
  .price {
    color: #000000;
    font-size: 26rpx;
  }
  .grid {
    display: flex;
    align-items: center;
  }
  /*向上*/
  .arrow_up_red {
    border-color: transparent transparent #f03939;
  }
  .arrow_down_red {
    border-color: #f03939 transparent transparent;
  }
  .arrow_up_gray {
    border-color: transparent transparent #ccc;
  }
  .arrow_down_gray {
    border-color: #ccc transparent transparent;
  }
  .arrow_up {
    width: 0;
    height: 0;
    border-width: 0 10rpx 10rpx;
    border-style: solid;
    margin: 9rpx 10rpx;
    position: relative;
  }
  /*向下*/
  .arrow_down {
    width: 0;
    height: 0;
    border-width: 10rpx 10rpx 0;
    border-style: solid;
    /*灰 透明 透明 */
    margin: 9rpx 10rpx;
    position: relative;
  }
</style>
